import react, { FC, useState } from "react"
import styles from "./SearchBar.module.scss"
import { AudioOutlined } from "@ant-design/icons"
import { Input } from "antd"
import type { GetProps } from "antd"

type SearchProps = GetProps<typeof Input.Search>

const { Search } = Input

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: "#1677ff",
    }}
  />
)

const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
  console.log(info?.source, value)

const SearchBar: FC = () => {
  const [keyword, setKeyword] = useState("")

  return (
    <div className={styles.searchWrapper}>
      <Search
        placeholder="input search text"
        onSearch={onSearch}
        style={{ width: 260 }}
      />
    </div>
  )
}

export default SearchBar
